<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import {reactive, ref,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false)
//定义数据模型
const registerData = ref({
  phonenumber:'',
  password:'',
  repassword:'',
  realname:'',
  address:''
})
//自定义表单规则
const checkRePassword=(rule,value,callback)=>{
  if (value===''){
    callback(new Error('请再次确认密码'))
  }else if (value!==registerData.value.password){
    callback(new Error('请确保两次输入的密码一样'))
  }else{
    callback()
  }
}

//定义表单规则
const rules={
  phonenumber:[
    {required:true,message:'请输入手机号',trigger:'blur'},
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  password:[
    {required:true,message:'请输入密码',trigger:'blur'},
    {min:5,max:16,message:'密码长度应改为5到16位',trigger:'blur'}
  ],
  repassword:[
    {validator: checkRePassword,trigger:'blur'},
  ],
  realname:[
    {required:true,message:'请输入真实姓名',trigger:'blur'},
    {min:2,max:8,message:'真实姓名应为2-8位',trigger:'blur'},
    {
      validator: function(rule, value, callback) {
        if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
          callback(new Error("请输入中文"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  address:[
    {required:true,message:'请输入地址',trigger:'blur'},
    {min:3,max:20,message:'地址应为3-20位',trigger:'blur'}
  ]
}

import {userRegisterService,userLoginService} from "@/api/user.js";
const register=async ()=>{
  let result=await userRegisterService(registerData.value);
  // if(result.code===0){
  //   alert(result.msg ? result.msg : '注册成功')
  //   //注册成功后清数据并改为登陆页面
  //   isRegister.value=false;
  //   cleanRegisterData();
  // }else{
  //   alert('注册失败')
  // }
  // alert(result.msg ? result.msg : '注册成功')
  ElMessage.success(result.msg ? result.msg : '注册成功')
  cleanRegisterData();
  isRegister.value=false;
}

//登录复用注册表单数据复用
//表单数据校验复用
//登陆函数
import {useTokenStore} from "@/stores/token.js";
import{useRouter} from 'vue-router';

const router=useRouter();
const tokenStore=useTokenStore();
const login=async ()=>{
  //调用接口，完成登录
  let result=await userLoginService(registerData.value)
  // if(result.code===0){
  //   alert(result.msg?result.msg:'登陆成功')
  // }else{
  //   alert('登陆失败')
  // }
  // alert(result.msg ? result.msg : '登陆成功')
  ElMessage.success(result.msg ? result.msg : '登录成功');
  //存储token
  tokenStore.setToken(result.data);
  //router.push('/')
  router.push({path:'/user/info',query:{adon: 1}})
}



const cleanRegisterData=()=>{
  registerData.value={
    phonenumber:'',
    password:'',
    repassword:'',
    realname:'',
    address:''
  }
}

//找回密码dialog
const findPasswordVisible=ref(false)
const email=ref('')
const verificationCode=ref('')
import {usersendverificationCodeService,userFindPassword} from "@/api/user.js";
//发送验证码
const sendverificationCode=async ()=>{
  await usersendverificationCodeService(email.value)
  ElMessage.success('验证码已发送,不要重复点，这里没设置倒计时')
}

const findPassword=async ()=>{
  await userFindPassword(verificationCode.value)
  location.reload()
}


</script>

<template>
  <el-row class="login-page">
    <!-- 一个列用于放置标题，占据整个行的宽度 -->
    <el-col :span="24" class="title-col">
      <h1 class="page-title">水电费预收费系统</h1>
    </el-col>

    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form login-form-blur">
      <!-- 注册表单 -->
      <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
        <el-form-item >
          <h1>注册</h1>
        </el-form-item>
        <el-form-item prop="phonenumber">
          <el-input :prefix-icon="User" placeholder="手机号" v-model.number="registerData.phonenumber"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.repassword"></el-input>
        </el-form-item>
        <el-form-item prop="realname">
          <el-input :prefix-icon="User" placeholder="请输入真实姓名" v-model="registerData.realname"></el-input>
        </el-form-item>
        <el-form-item prop="address">
          <el-input :prefix-icon="User" placeholder="请输入地址" v-model="registerData.address"></el-input>
        </el-form-item>

        <!-- 注册按钮 -->
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space  @click="register">
            注册
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" v-on:click="isRegister = false;cleanRegisterData()">
            ← 返回
          </el-link>
        </el-form-item>
      </el-form>
      <!-- 登录表单 -->
      <el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item prop="phonenumber">
          <el-input :prefix-icon="User" placeholder="手机号" v-model.number="registerData.phonenumber"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
        </el-form-item>
        <el-form-item class="flex flex label-color">
          <div class="flex checkbox-container">
            <el-link type="primary" :underline="false "  :style="{ color: '#222223' }"  @click="findPasswordVisible=true">忘记密码？</el-link>
          </div>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" :style="{ color: '#222223' }" @click="isRegister = true;cleanRegisterData()">
            注册 →
          </el-link>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <el-dialog v-model="findPasswordVisible" title="找回密码" width="400">
    <el-form>
      <el-form-item label="邮箱">
        <el-input placeholder="请输入邮箱" v-model="email"></el-input>

      </el-form-item>
      <el-form-item label="验证码">
          <el-input placeholder="请输入验证码" v-model="verificationCode"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="sendverificationCode" >发送验证码</el-button>
    <el-button type="primary" @click="findPassword">确认</el-button>


  </el-dialog>





</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
  height: 100vh;//确保占据整个视口高度
  background-image: url('@/assets/background1.jpg'); // 设置背景图
  background-size: cover; // 背景图覆盖整个元素
  background-position: center; // 背景图居中显示
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden; // 防止内容超出背景范围
  //background-color: #fff;

  .bg {
    //background: url('@/assets/background1.jpg');
    border-radius: 0 20px 20px 0;
  }

  //用于应用毛玻璃效果
  .login-form-blur {
    background-color: rgba(255, 255, 255, 0.5); // 半透明背景，可根据需要调整透明度
    backdrop-filter: blur(10px); // 应用模糊效果
    border-radius: 10px; // 边框圆角
    padding: 20px; // 内边距
  }

  .title-col {
    text-align: center; // 使标题在列中居中
    //padding-top: 20px; // 根据需要调整标题与顶部的距离
    align-items: center;
    justify-content: center;
    height: 80px; /* 直接设置高度，根据需要调整 */
    padding: 10px; /* 减少内边距 */
  }

  .page-title {
    font-size: 2rem; // 根据需要调整标题大小
    color: #fff; // 标题颜色，根据背景调整
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); // 给标题添加阴影，增强可读性
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}

.label-color {
  .el-checkbox__label {
    color: #222223;
  }
}

/* 统一设置文本颜色 */
.text-color {
  color: #222223; /* 选择您希望的颜色 */
}

</style>